<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:p="http://primefaces.org/ui"
	xmlns:f="http://java.sun.com/jsf/core">

<h:body>

	<ui:composition template="../template/template.xhtml">

		<ui:define name="content">
			<p:panel header="availability overview">
				<h:form id="form">
					<div class="content">
						<p:commandButton styleClass="topButton"
							value="add availability" onclick="addAvailabilityDialog.show();" />

						<p:dataTable var="availability"
							value="#{availabilityJSF.availabilityDataModel}"
							selection="#{availabilityJSF.selectedAvailability}"
							selectionMode="single">

							<p:ajax update=":form:availabilityDetailDialog" event="rowSelect"
								oncomplete="availabilityDetailDialog.show()" />

							<p:column headerText="start" sortBy="#{availability.start}">
								<h:outputText value="#{availability.start}" >
									<f:convertDateTime pattern="dd-MM-yyyy HH:mm" timeZone="CET" />
								</h:outputText>
							</p:column>
							<p:column headerText="end" sortBy="#{availability.end}">
								<h:outputText value="#{availability.end}" >
									<f:convertDateTime pattern="dd-MM-yyyy HH:mm" timeZone="CET" />
								</h:outputText>
							</p:column>
						</p:dataTable>
					</div>

					<p:dialog id="availabilityDetailDialog"
						header="availability detail" widgetVar="availabilityDetailDialog"
						resizable="false" showEffect="fade" hideEffect="fade" modal="true">
						<table>
							<tr>
								<td><h:outputLabel for="start" value="start*" /></td>
								<td><p:calendar
										value="#{availabilityJSF.selectedAvailability.start}"
										id="start" pattern="dd-MM-yyyy HH:mm" timeZone="CET"
										showOn="button" /></td>
							</tr>
							<tr>
								<td><h:outputLabel for="end" value="end*" /></td>
								<td><p:calendar
										value="#{availabilityJSF.selectedAvailability.end}" id="end"
										pattern="dd-MM-yyyy HH:mm" timeZone="CET" showOn="button" /></td>
							</tr>
						</table>
						<p:commandButton value="save" styleClass="bottomButton"
							action="#{availabilityJSF.updateAvailability}" />
						<p:commandButton value="delete" styleClass="bottomButton"
							action="#{availabilityJSF.deleteAvailability}" />
					</p:dialog>
				</h:form>
			</p:panel>

			<p:dialog id="addAvailabilityDialog" header="add availability"
				widgetVar="addAvailabilityDialog" resizable="false"
				showEffect="fade" hideEffect="fade" modal="true">
				<h:form>
					<table>
						<tr>
							<td><h:outputLabel for="start1" value="start*" /></td>
							<td><p:calendar
									value="#{availabilityJSF.newAvailability.start}" id="start1"
									pattern="dd-MM-yyyy HH:mm" showOn="button" /></td>
						</tr>
						<tr>
							<td><h:outputLabel for="end1" value="end*" /></td>
							<td><p:calendar
									value="#{availabilityJSF.newAvailability.end}" id="end1"
									pattern="dd-MM-yyyy HH:mm" showOn="button" /></td>
						</tr>
					</table>
					<p:commandButton value="save" styleClass="bottomButton"
						action="#{availabilityJSF.addAvailability}" />
				</h:form>
			</p:dialog>
		</ui:define>

	</ui:composition>

</h:body>

</html>